<template>
     <div class="tag-view">
    <el-tabs
      v-model="tabActive"
      type="card"
      ref="tabsRef"
      class="tag-view-content user-none"
      :class="{ ['tag-view-content-' + layout.tabsBarStyle]: true }"
      @tab-change="handleTabChange"
      @tab-remove="handleTabsDelete"
    >
      <el-tab-pane
        v-for="item in tabsViewList"
        :key="item.fullPath"
        :name="item.fullPath"
        :closable="!item.meta.noClosable"
      >
        <template #label>
          <div
            @contextmenu.prevent="openMenu($event, item.fullPath)"
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-icon v-if="layout.isTagsviewIcon">
              <SvgIcon :name="item.meta.icon" />
            </el-icon>
            &nbsp;
            <span>{{ item.meta.title }}</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    //右侧更多菜单
    <TagMenu
      :list="openMenuList"
      :tagViewLenght="tabsViewList.length"
      @handleClick="handleOption"
    />
    //右键下拉菜单
    <Contextmenu
      :list="openMenuList"
      :tagViewLenght="tabsViewList.length"
      :="contextmenuParmas"
      v-model:visible="visible"
      @handleClick="handleOption"
    />
  </div>
</template>

<script setup >
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
// import { useSortable } from '@/utils/sortablejs'
// import useSettingStore from '@/store/modules/setting/index'
import TagMenu from './tagMenu.vue'
import Contextmenu from './contextmenu.vue'
import {useTabsStore} from '~/store/tabs'
import {useUserStore} from '~/store/user'
const Router = useRouter()
const Route = useRoute()
// const SettingStore = useSettingStore()
const TabsStore = useTabsStore()
const UserStore = useUserStore()
const { refsh, layout } = ref({refsh: false, layout: {isTagsviewIcon: false, tabsBarStyle: 'scrollable'}}) // 需要pinia 转换为响应式数据
const { tabsViewList } = storeToRefs(TabsStore)
const tabsRef = ref(null) //tabs实例对象
const sortableInstance = ref(null) //拖拽的实例对象
// 存储x轴y轴
const contextmenuParmas = ref({
  left: 0,
  top: 0,
})
const currentPath = ref('') // 当前存起路径
const visible = ref(false) //鼠标右键Tabs菜单
const tabActive = ref('')
//双击右键事件Tabs
const openMenu = ({ x, y }, fullPath) => {
  contextmenuParmas.value = {
    left: x, // X轴
    top: y, // Y轴
  }
  visible.value = true //打开菜单
  currentPath.value = fullPath // 路径存起
}
// 初始化tabs导航栏标签
const initTabs = () => {
  // 菜单栏  item.meta?.isAffix 是否固定的标签栏(多数情况默认是首页后续根据isAffix来配置)
  UserStore.flatMenuListGet.forEach((item) => {
    if (item.meta?.isAffix) {
      TabsStore.addTabsView({
        fullPath: item.path,
        meta: item.meta,
        name: item.name,
      })
    }
  })
}
initTabs() //初始化执行Tabs
onMounted(() => {
  tabsViewDrop() //初始化执行拖拽功能
})
// 监听路由完整路径
watch(
  () => Route.fullPath,
  () => {
    // 如果tabHidden为true不执行
    if (Route.meta.tabHidden) return
    let { meta, name, fullPath } = Route
    tabActive.value = fullPath //路径赋值
    TabsStore.addTabsView({
      fullPath,
      meta,
      name,
    })
  },
  {
    immediate: true,
  },
)
// 跳转方法
const handleTabChange = (fullPath) => Router.push(fullPath)
// 移除事件
const handleTabsDelete = (fullPath) => {
  TabsStore.removeTabsView(
    fullPath,
    Route.fullPath === fullPath,
    handleTabChange,
  )
}
//所有方法
const handleOption = (index, isHas) => {
  let fullPath = isHas ? currentPath.value : Route.fullPath //当前路由参数
  switch (index) {
    case 0:
      handleTabChange(fullPath)
      refsh.value = !refsh.value //刷新事件
      break
    case 1:
      TabsStore.closeOtherTabsView(fullPath)
      handleTabChange(fullPath) //跳转到对应的路由
      break
    case 2:
      TabsStore.closeTabsViewOnSide(fullPath, 'left')
      handleTabChange(fullPath) //跳转到对应的路由
      break
    case 3:
      TabsStore.closeTabsViewOnSide(fullPath, 'right')
      handleTabChange(fullPath) //跳转到对应的路由
      break
    case 4:
      TabsStore.closeAllTabsView() //关闭全部
      handleTabChange('/home')
      break
  }
}
//双击右键值数据
const openMenuList = ref([
  {
    icon: 'Refresh',
    name: '刷新',
  },
  {
    icon: 'Close',
    name: '关闭其他',
  },
  {
    icon: 'Back',
    name: '关闭左侧',
  },
  {
    icon: 'Right',
    name: '关闭右侧',
  },
  {
    icon: 'Close',
    name: '关闭全部',
  },
])
</script>

<style lang="scss" scoped>

</style>